import React, { useEffect, useRef } from "react";
import Item from "./ContentItem/Item";
import { chatDataItem } from "@/types/chatType";

const Content: React.FC<{
  chatData: chatDataItem[];
  toBottom: boolean;
  setToBottom: Function;
}> = (props) => {
  console.log("渲染了")
  const { chatData, toBottom, setToBottom } = props;
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (toBottom) {
      if (ref.current) {
        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
        ref.current?.scrollTo(0, ref.current.scrollHeight);
      }
    }
    return () => {
      if (chatData.length) {
        setToBottom(false);
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [chatData]);
  return (
    <div className={"ChatList"} ref={ref}>
      {chatData.map((item, index) => {
        return <Item {...item} key={"chatItem" + index} />;
      })}
    </div>
  );
};
export default Content;
